<template>
  <view class="container">
    <uni-nav-bar title="报表" background-color="#fff" fixed statusBar :border="false" height="88rpx" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>
    <view class="card">
      <view class="title">
        报表管理
      </view>
      <uni-grid :column="3" :show-border="false" :square="false" @change="change1">
        <uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
          <view class="grid-item-box">
            <view class="pic">
              <image class="image" :src="item.url" mode="aspectFill" />
            </view>
            <text class="text">{{ item.text }}</text>
            <view v-if="item.badge" class="grid-dot">
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
export default {
  name: "InWarehouse",
  data() {
    return {
      list: [
        {
          url: '/static/statement/xiaoshoubaobiao.png',
          page: '/pages/statement/salesReport',
          text: '销售明细报表',
        },
        {
          url: '/static/statement/xiaoshoubaobiao.png',
          page: '/pages/statement/salesOrderReport',
          text: '销售订单报表',
        },
        {
          url: '/static/statement/kucunbaobiao.png',
          page: '/pages/statement/inventoryInfo',
          text: '库存报表',
        },
        {
          url: '/static/statement/poorder.png',
          page: '/pages/statement/purchaseReport',
          text: '采购报表',
        }, {
          url: '/static/statement/jiaojiebanbaobiao.png',
          page: '/pages/statement/shiftTurnover',
          text: '交接班报表',
        },
        {
          url: '/static/statement/huiyuanbaobiao.png',
          page: '/pages/statement/memberInfo',
          text: '会员报表',
        },
				{
				  url: '/static/statement/changePrice.png',
				  page: '/pages/statement/changePrice',
				  text: '改价记录',
				}
      ]
    };
  },
  methods: {
    change1(e) {
      let { index } = e.detail
      const url = this.list[index].page;
      this.$navTo(url)
    }
  },
}
</script>


<style>
page {
  background: #f7f7f7;
}
</style>
<style lang="scss" scoped>
page {
  background: #f7f7f7;
}

.container {
  padding: 0 15rpx;
  box-sizing: border-box;
}

.pic {
  width: 90rpx;
  height: 90rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: $uni-main-bgColor;
  border-radius: 20rpx;

  .image {
    width: 65%;
    height: 65%;
  }
}

.text {
  font-size: $uni-font-size-small;
  margin-top: 10rpx;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
}

.grid-dot {
  position: absolute;
  top: 10rpx;
  right: 30rpx;
}

.card {
  background-color: #fff;
  border-radius: 15rpx;
  margin-top: 20rpx;

  .title {
    font-weight: bold;
    font-size: $uni-font-size-big;
    color: $uni-main-bgColor;
    padding: 15rpx 0;
    margin: 0 30rpx;
    border-bottom: 0.5px solid #ccc;
    box-sizing: border-box;
  }
}
</style>